<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
    getAllAnnouncementData,
    addAnnouncementData,
    updateAnnouncementData,
    deleteAnnouncementData,
} from "./api";
const userId = sessionStorage.getItem("user_id");
const loading = ref(false);
const announcementList = ref([]);
const dialogVisible = ref(false);
const editMode = ref(false);
const form = reactive({
    _id: userId,
    sort: "",
    text: "",
    operatorId: "",
});

function resetForm() {
    form._id = userId;
    form.sort = "";
    form.text = "";
    form.operatorId = "";
}

async function fetchAnnouncementList() {
    loading.value = true;
    try {
        announcementList.value = await getAllAnnouncementData();
    } catch (e) {
        ElMessage.error("获取公告失败");
    } finally {
        loading.value = false;
    }
}

function handleAdd() {
    resetForm();
    editMode.value = false;
    dialogVisible.value = true;
}

function handleEdit(item) {
    form._id = item._id;
    form.sort = item.sort;
    form.text = item.text;
    form.operatorId = "";
    editMode.value = true;
    dialogVisible.value = true;
}

async function handleSave() {
    loading.value = true;
    try {
        if (editMode.value) {
            await updateAnnouncementData(form._id, {
                operatorId: userId,
                sort: form.sort,
                text: form.text,
            });
            ElMessage.success("更新成功");
        } else {
            await addAnnouncementData({
                operatorId: userId,
                sort: form.sort,
                text: form.text,
            });
            ElMessage.success("添加成功");
        }
        dialogVisible.value = false;
        fetchAnnouncementList();
    } catch (e) {
        ElMessage.error(e?.response?.data?.error || "操作失败");
    } finally {
        loading.value = false;
    }
}

async function handleDelete(id) {
    ElMessageBox.prompt("确定要删除公告嘛？", "删除公告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    })
        .then(async () => {
            loading.value = true;
            try {
                await deleteAnnouncementData(id, userId);
                ElMessage.success("删除成功");
                fetchAnnouncementList();
            } catch (e) {
                ElMessage.error(e?.response?.data?.error || "删除失败");
            } finally {
                loading.value = false;
            }
        })
        .catch(() => {});
}

onMounted(fetchAnnouncementList);
</script>

<template>
    <div style="max-width: 600px; margin: 40px auto">
        <el-card>
            <div style="margin-bottom: 16px; text-align: right">
                <el-button type="primary" @click="handleAdd"
                    >新建公告</el-button
                >
            </div>
            <el-table
                :data="announcementList"
                style="width: 100%"
                v-loading="loading"
            >
                <el-table-column prop="sort" label="排序" width="80" />
                <el-table-column prop="text" label="公告内容" />
                <el-table-column label="操作" width="180">
                    <template #default="{ row }">
                        <el-button size="small" @click="handleEdit(row)"
                            >编辑</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(row._id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
            v-model="dialogVisible"
            :title="editMode ? '编辑公告' : '新建公告'"
            width="500px"
        >
            <el-form :model="form" label-width="100px">
                <el-form-item label="排序">
                    <el-input v-model="form.sort" type="number" />
                </el-form-item>
                <el-form-item label="公告内容">
                    <el-input type="textarea" v-model="form.text" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" :loading="loading" @click="handleSave"
                    >保存</el-button
                >
            </template>
        </el-dialog>
    </div>
</template>

<style lang='scss' scoped>
</style>